<template>
<div id="app" >
  <vanta-img ></vanta-img>
<!--  <el-carousel :autoplay="false" direction="vertical" height="100vh">-->
<!--    <el-carousel-item v-for="item in imgList" :key="item.id">-->
<!--      <img :src="item.src" style="height:100%;width:100%;" :title="item.title"/>-->
<!--    </el-carousel-item>-->
<!--  </el-carousel>-->
  <el-header>
    <div class="el-icon-user-solid">
      <span>  Xiao Zuo's Blog Webside</span>
    </div>
    <div class="blog_img">
      <img :src="userImg">
    </div>
  </el-header>
    <el-row :gutter="50" style="margin-top:30px">
      <el-col class="left_menu" :span="4" :offset="2">
        <el-card style="height:800px ">

          <el-menu  background-color=transparent>
            <el-menu-item index="1"   @click="articleIndex">
              <template slot="title" >
                <i class="el-icon-circle-plus" ></i>
                <span>发博客</span>
              </template>
            </el-menu-item>

            <el-menu-item index="2" @click="dialog = true" >
              <i class="el-icon-refrigerator"></i>
              <span slot="title">草稿箱</span>
            </el-menu-item>


            <el-menu-item index="3" @click="drawer = true">
              <i class="el-icon-document"></i>
              <span slot="title">回收站</span>
            </el-menu-item>

          </el-menu>
          <el-alert
              style="margin-top: 400px"

              title="提示"
              type="info"
              description="还有很多功能正在开发中"
              effect="dark"
              show-icon
              >
          </el-alert>

        </el-card>
      </el-col>
      <el-col :span="12" >
<!--        博文中间部分-->
        <el-scrollbar >
        <el-main>
          <router-view></router-view>
        </el-main>
        </el-scrollbar>


      </el-col>
      <el-col class="right_menu" :span="4">
        <el-card class="right_card" >
          <img class="userImg" :src="userImg"/>
          <p class="userNick">{{userInfo.nickname}}</p>
        </el-card>
      </el-col>
    </el-row>


  <el-drawer
      title="回收站"
      :visible.sync="drawer"
      direction="ltr"
      size="60%">
    <el-card  class="deletebox"

              v-for="(item,index) in articleList"
              :key="item.id"
              v-if="item.is_delete==1">
      <el-row>
        <el-col :span="2">
          <img class="info_PageImg" :src="userImg" />
        </el-col>
        <el-col :span="10" >
          <span style="font-size: 10px">{{userInfo.nickname}}</span><br/>
          <span style="color: #c2bcbc;font-size: 5px">{{'发布于'+item.pub_date}}</span>
          <span style="color: #c2bcbc;font-size: 5px;margin-left: 10px">{{'来自'+userInfo.username}}</span>
        </el-col>
        <el-col :span="2" :offset="8" style="background:rgba(0, 0, 0, 0.1);border-radius: 20px;text-align: center">{{ item.title }}</el-col>

      </el-row>
      <el-row>
        <el-col>
          <p v-html="item.content"
             style="margin-top: 20px;font-family: 'Microsoft YaHei UI Light'">

            {{ item.content }}

          </p>
          <div class="articleImg" style="margin-bottom: 20px;">
            <img style="border-radius: 10px;margin-top: 20px;margin-bottom: 20px" :src="item.cover_img" onerror="this.style.display='none'" />
          </div>
        </el-col>
      </el-row>


    </el-card>
  </el-drawer>


  <el-drawer
      title="草稿箱"
      :visible.sync="dialog"
      direction="ltr"
      size="50%">
    <el-card  class="deletebox"
           v-for="(item,index) in articleList"
           :key="item.id"
           v-if="item.state=='草稿'">
      <el-row>
        <el-col :span="2">
          <img class="info_PageImg" :src="userImg" />
        </el-col>
        <el-col :span="10" >
          <span style="font-size: 10px">{{userInfo.nickname}}</span><br/>
          <span style="color: white;font-size: 5px">{{'发布于'+item.pub_date}}</span>
          <span style="color: white;font-size: 5px;margin-left: 10px">{{'来自'+userInfo.username}}</span>
        </el-col>
        <el-col :span="2" :offset="8" style="background:rgba(0, 0, 0, 0.1);border-radius: 20px;text-align: center">{{ item.title }}</el-col>

      </el-row>
      <el-row>
        <el-col>
          <p v-html="item.content"
             style="margin-top: 20px;font-family: 'Microsoft YaHei UI Light'">

            {{ item.content }}

          </p>
          <div class="articleImg" style="margin-bottom: 20px;">
            <img style="border-radius: 10px;margin-top: 20px;margin-bottom: 20px" :src="item.cover_img" onerror="this.style.display='none'" />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-drawer>
</div>
</template>

<script>
export default( {
  name: "home",
  data(){
    return{
      drawer: false,
      dialog:false,
      bg_color:'75B49ABA',
      userInfo:'',
      id:'',
      itemList:'',
      userImg:'',
      articleList:[],
      articleList_status:''
    }
  },methods:{
    articleIndex(){
      this.$router.push('./demo')
    },
    articleDraftBox(){

    },
    async getUserInfo(){
      this.$get('/my/userinfo').then(res=>{
        this.userInfo=res.data
        this.userImg=res.data.user_pic
        this.id=res.data.id

      })
    },
    async getArticle(){
      this.$get('/my/article/get').then(res=>{
        this.articleList=res.data
        this.articleList_status=res.status
        console.log(this.articleList)
      })
    }
  },
  created() {
    this.getUserInfo()
    this.getArticle()
  }
})
</script>

<style lang="less" scoped>


#app{

  overflow: hidden;
  //opacity: 0;
  //animation: bottomBtn 0.5s linear 100ms forwards;

}
//@keyframes bottomBtn {
//  to{
//    opacity: 1;
//  }
//  from{
//    opacity: 0;
//  }
//}
//.el-carousel {
//  position: absolute;
//  height: 100%;
//  left: 0;
//  right: 0;
//  top: 0;
//  bottom: 0;
//  z-index: -1;
//
//}

.el-header {
  background: rgba(0, 0, 0, 0.2);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  line-height: 60px;
  box-shadow: 0px 0.4px 4px rgb(0, 0, 0, .1);
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  transition-property: all;
  z-index: 1;
  border-radius: 30px;
  margin: 10px 10px;
  padding: 0px 20px;

}
.el-header:hover {
  margin: 10px 8px;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0.5px 10px rgb(0, 0, 0, .25);


}

.blog_img > img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-top: 20px;
  transform: translateX(5px);
}
.el-card{
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border-radius: 20px;
  box-shadow: 0px 0.5px 7px rgb(0, 0, 0, .1) !important;
  margin-bottom: 20px;
  overflow: visible;
  backdrop-filter: blur(20px)
}

.el-card:hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0px 0.5px 15px rgb(0, 0, 0, .2) !important;
  transform: translateY(-4px);
}
.left_menu{

}
.middle_menu{
  margin-bottom: 20px;
}
.right_menu{
  margin-top: 80px;
  text-align: center;
}

.userImg{
  position: absolute;

  height: 100px;
  width: 100px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  border: 10px solid rgba(0,0,0,0.1);
  transform: translate(-50%,-70%);
}
.userNick{
  margin-top: 50px;
  font-family: "Microsoft YaHei UI Light";

  font-size: 15px;
}
.userImg:hover{
  border: 10px solid rgba(0,0,0,0.3);
}

.info_PageImg{

  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.articleImg{
  max-width: 500px;
}
.articleImg>img{
  height: 100%;
  width: 100%;
}
.el-main {
  height: 100vh;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.5);
  border-radius: 3px;
  backdrop-filter: blur(20px)
}
.el-menu{
  border-right: 0;

}
.el-menu-item{
  color: white;
}
.el-menu-item.is-active {
  color: white ;

}
.el-menu-item:focus, .el-menu-item:hover {
  border-radius: 20px ;
}
.el-menu-item{
  border-radius: 20px;
}
/deep/.el-upload-dragger {

  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}
.float_window{
  position: absolute;/*固定位置*/
  z-index:10;
  right:0px;
  bottom:100px;
  overflow: hidden;
}
.deletebox{
  margin: 20px;
}
.right_card{
  height: 600px;
}
vanta-img {
  z-index: -1;
}

</style>
